<template>
  <!-- <LabelPrefixWraper
    :class="['t-currency']"
    :label="mappingProps.label"
    :hideLabel="mappingProps.hideLabel"
    :labelPosition="mappingProps.labelPosition"
    :helpConf="mappingProps.helpConf"
    :helpTooltip="mappingProps.helpTooltip"
    :helpPlacement="mappingProps.helpPlacement"
    :helpMore="mappingProps.helpMore"
    :helpMorePopup="mappingProps.helpMorePopup"
    :helpMoreLink="mappingProps.helpMoreLink"
    :helpMoreLinkHrefStatic="mappingProps.helpMoreLinkHrefStatic"
    :helpMoreLinkHrefExp="mappingProps.helpMoreLinkHrefExp"
  >
    <div ref="ref_currency"> </div>
  </LabelPrefixWraper> -->
  <div class="discountAndCurrency" :style="mappingProps.style" :class="mappingProps.class" v-show="mappingProps.visible" ref="currencyRef">

    <t-input
      v-bind="(()=>{
      
        let props = {
         ...mappingProps
        };
        delete props.style;
        delete props.class;
        return props;
      })()"
      v-model="mappingProps.modelValue"
      :rules="mappingProps.rules.concat(rules)"
      borderless
      ref="input"
    >
      <template v-slot:default>
        <div ref="ref_currency" style="width: 100%; margin-right: 2px"> </div>
      </template>
    </t-input>
  </div>
</template>

<script>
/**
 * @数据源
 * @标题
 * @placeholder
 * @hintmode
 * @defaultvalue
 * @readlony
 * @visible
 * @Space 输入框间距
 * @isTextArea 是否单行文本
 *
 */
import useMappingProps from 't/common/hooks/useMappingProps';
import { fixNameSpace } from 't/common/utils';
import { defineComponent, onMounted, ref, watch } from 'vue';
import LabelPrefixWraper from '../../basic/label-prefix-wraper';
// import currency from './currency.vue';
import TField from 't/basic/field';
import TInput from 't/basic/input';
import { Discount as currencyComponent } from '../discount/discountComponent';
import './index.scss';

export default defineComponent({
  name: fixNameSpace('currency'),
  components: { LabelPrefixWraper, TInput, TField },
  props: {
    // ...commonProps,
    ...LabelPrefixWraper.props,
    placeholder: String, //占位内容
    showHint: Boolean, //悬停文字
    hintMode: String, //文字内容(自定义、同位内容)
    hintMsg: String, //自定义文字
    defaultValue: String, //默认值
    readonly: {
      type: Boolean,
      default() {
        return false;
      },
    },
    langCurrency: {
      type: String,
      default() {
        return '';
      },
    },
    modelValue: {
      type: String,
      default() {
        return '';
      },
    },
    required: {
      type: Boolean,
      default() {
        return false;
      },
    },
    requiredMessage: {
      type: String,
      default() {
        return '必填提示';
      },
    },
    requireMultRule: {
      type: String,
      default() {
        return 'Master';
      },
    },
    maxLength: {
      type: Number,
      default() {
        return 0;
      },
    },
    maxLengthMessage: {
      type: String,
      default() {
        return '';
      },
    },
    localInfoList: {
      type: Array,
      default() {
        return [];
      },
    },
    rules: {
      type: Array,
      default: [],
    },
    visible: {
      type: Boolean,
      default() {
        return true;
      },
    },
      showSpinButtons: {
      type: Boolean,
      default() {
        return true;
      },
    },
       class: {
      type: String,
      default() {
        return '';
      },
    },
    style: {
      type: String,
      default() {
        return '';
      },
    },
    step: Number,
    precision: Number,
    min: Number,
    max: Number,
    fixedRule: Number,
    tabIndex: Number
  },
  emits: ['update:modelValue', 'change', 'focus'],
  setup(props, { attrs, emit, expose, slots }) {
    const input = ref(null);
    const currencyRef = ref(null);
    const [mappingProps, mappingExpose] = useMappingProps(props, {
        focus() {
        input.value.focus(...arguments);
      },
    });

    const ref_currency = ref(null);
    const currencyInstance = ref(null);

    const getLangList = () => {
      console.log('mappingProps.localInfoList', mappingProps.localInfoList);
      return mappingProps.localInfoList;
      //todo 修改成走接口
    };
    const hintPlaceholder = () => {
      const msg = ref('');
      if (mappingProps.showHint) {
        if (mappingProps.hintMode == 'custom') {
          msg.value = mappingProps.hintMsg;
        } else {
          msg.value = mappingProps.placeholder;
        }
      }
      return msg;
    }; //悬停文字相关
    const proxy_value = ref('');
    watch(
      () => proxy_value.value,
      (newVal, oldVal) => {
        currencyInstance.value.element.querySelector(
          '.TeldcurrencyComponent_value',
        ).value = newVal;
      },
    );
    // const lang = ref(
    //   TFF.common.storage.Cookie.read('teld_locale') ||
    //     TFF.common.storage.Cookie.read('wrp_systemLocale') ||
    //     'zh-CN',
    // );
    const language = ref('');
    if (window.TFF) {
      language.value =
        TFF.common.storage.Cookie.read('teld_locale') ||
        TFF.common.storage.Cookie.read('wrp_systemLocale') ||
        'zh-CN';
    } else {
      language.value = 'zh-CN';
    }
    const lang = ref(language);
    const value = ref(mappingProps.modelValue);
    const dataChange = data => {
      if ( mappingProps.modelValue !== data) {
          mappingProps.modelValue = data
          emit('update:modelValue', data);
          emit('change', data);
      }
    };
    const onFocus = () => {
      emit('focus');
    }
    const setValue = val => {
      value.value = val;
      currencyInstance.value&&currencyInstance.value.setValue(val);
    };
    const validate = () => {
      return input.value?.validate();
    }
    expose({
      ...mappingExpose,
      setValue,
      Validate: validate,
      validate: validate,
    });
    const validateByComponent = val => {
      let message = true;
      console.log('----val-----', val)
      if (val === 0||val === '0') { } else {
        if (!val && mappingProps.required) {
        return mappingProps.requiredMessage;
      }
      }

      if (mappingProps.max) {
        if (val > mappingProps.max) {
          message =
            Funcs.GetTerms(
              'Schema.Controls.PublicTerms.verification.moreThan',
              '输入值大于期望的最大值',
            ) + mappingProps.max;

      } else if (val < mappingProps.min) {
          message =
            Funcs.GetTerms(
              'Schema.Controls.PublicTerms.verification.lessThan',
              '输入值小于期望的最小值',
            ) + mappingProps.min;
      }
      }


      return message;
    };
    const rules = ref([validateByComponent]);
    watch(
      () => mappingProps.langCurrency,
      () => {
        if (currencyInstance.value) {
          currencyInstance.value.prefix = mappingProps.langCurrency
          currencyInstance.value.render()
          currencyInstance.value.setValue( currencyInstance.value.value)
        }

      },
      { immediate: true },
    );
      watch(()=>mappingProps.precision,()=>{
        if( currencyInstance.value){
  
          currencyInstance.value.precision = mappingProps.precision
          currencyInstance.value.render()
          currencyInstance.value.setValue( currencyInstance.value.value)
        }
      })
    onMounted(() => {
      currencyInstance.value = new currencyComponent(ref_currency.value, {
         ...mappingProps,
        title: hintPlaceholder(),
        type: 'currency',
        direction: mappingProps.direction,
        readonly: mappingProps.readonly,
        tabindex: mappingProps.tabIndex ? mappingProps.tabIndex : 0,
        dataChange: dataChange,
        focus: onFocus,
        lang: 'zh-CN' || lang.value,
        prefix: mappingProps.langCurrency,
        value: value.value,
        validate: () => { },

        max:mappingProps.max,
        min:mappingProps.min
      });
      currencyRef.value.tabIndex = '-1'
    //  console.log(input.value.validate())
      //setValue(mappingProps.modelValue);
    });
    watch(
      () => mappingProps.modelValue,
      () => {
       (value.value = mappingProps.modelValue);
        setValue(mappingProps.modelValue);
      },
      { immediate: true },
    );

    watch(
      () => mappingProps.readonly,
      () => {
        currencyInstance.value &&
          currencyInstance.value.setReadOnly(mappingProps.readonly);
      },
      { immediate: true },
    );
    watch(
      () => mappingProps.placeholder,
      () => {
        currencyInstance.value &&
          currencyInstance.value.setPlaceholder(mappingProps.placeholder);
      },
      { immediate: true },
    );
    return {
      proxy_value,
      attrs,
      rules,
      // styles,
      mappingProps,
      ref_currency,
      currencyRef,
      currencyInstance,
      input
    };
  },
});
</script>

<style lang="scss" scoped></style>
